<template>
  <el-form :model="yx" ref="formdong" label-width="100px" :rules="formrules">
    <el-form-item label="username" prop="username">
      <!-- <el-input v-model.trim="user.name" /> -->
      <el-input v-model="yx.username" />
    </el-form-item>
    <el-form-item label="password" prop="password">
      <!-- <el-input v-model.trim="user.password" /> -->
      <el-input v-model="yx.password" />
    </el-form-item>
    <el-form-item label="phone" prop="phone">
      <!-- <el-input v-model.trim="user.phone" /> -->
      <el-input v-model="yx.phone" maxlength="11" />
    </el-form-item>
    <el-form-item label="email" prop="email">
      <!-- <el-input v-model.trim="user.email" /> -->
      <el-input v-model="yx.email" />
    </el-form-item>
    <el-form-item label="introduction" prop="introduction">
      <!-- <el-input v-model.trim="user.introduction" /> -->
      <el-input v-model="yx.introduction" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submit">Update</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { senduser, sendquery } from '@/api/form'
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          username: '',
          password: '',
          phone: '',
          email: '',
          introduction: '',

        }
      }
    }
  },
  data() {
    return {
      //向后端发送的内容
      yx: {
        username: '',
        password: '',
        phone: '',
        email: '',
        introduction: '',
        role: '1',
      },
      iu: {
        username: ''
      },
      formrules: {
        username: [{
          required: true,
          type: 'string',
          message: '请输入用户名',
          trigger: 'blur'
        }],

        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/, message: '密码必须同时包含数字与字母,且长度为 6-20位' }],


        phone: [{
          required: true,
          type: 'string',
          message: '请输入手机号',
          trigger: 'blur'
        }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" },
        { type: "email", message: "请输入有效的邮箱", trigger: ["blur", "change"] }],
        introduction: [{
          required: true,
          message: "请输入简介",
          trigger: "blur"
        }],
      }
    }
  },
  created() {
    this.fetchdata()
  },
  methods: {
    //   submit() {
    //     this.$message({
    //       message: 'User information has been updated successfully',
    //       type: 'success',
    //       duration: 5 * 1000
    //     })
    //   },

    fetchdata() {
      sendquery(this.iu).then(response => {
        // 处理成功的响应
        this.yx.introduction = response.data["introduction"]
        this.yx.username = response.data["name"]
        this.yx.role = response.data["roles"]
        this.yx.phone = response.data["phone"]
        this.yx.email = response.data["email"]
        this.$message('info get successfully')
        // reponsecode = reponse.data["code"]
      }).catch(error => {
        // 处理错误的响应
        this.$message.error('Failed to get info')
      })
    },
    submit() {
      senduser(this.yx).then(response => {
        // 处理成功的响应
        this.$message('update successfully!')
        // reponsecode = reponse.data["code"]
      }).catch(error => {
        // 处理错误的响应
        this.$message.error('Failed to update ')
      })
    }
  }


}
</script>
